import React, { useEffect } from 'react';
import { useIntl } from 'umi';
import {
  Button,
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Space,
  Row,
  Cascader,
} from 'antd';

import { isEmpty } from 'lodash';

import * as publicData from '@/utils/staticData';

const AddCustomerAccount: React.FC = (props: any) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { onClose, open, echoData } = props;

  const [form] = Form.useForm();

  const { Option } = Select;
  const { SHOW_CHILD } = Cascader;

  // 远程搜索地区银行识别码
  const options = [
    {
      value: '0011',
      label: '国库',
    },
    {
      value: '003',
      label: '渣打银行（香港）有限公司',
    },
    {
      value: '004',
      label: '香港上海汇丰银行有限公司',
    },
    {
      value: '005',
      label: '东方汇理银行',
    },
    {
      value: '006',
      label: '东方汇理银行',
    },
    {
      value: '007',
      label: '东方汇理银行',
    },
    {
      value: '008',
      label: '东方汇理银行',
    },
  ];

  // 远程搜索关键字查询
  const filter = (inputValue, path) =>
    path.some(
      (option) =>
        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  // 提交表单
  const handleSubmit = () => {
    const formSubmitData = form.getFieldsValue();
    // console.log("formSubmitData", formSubmitData);
  };

  // 回显开关
  let flag = _.isEmpty(echoData);

  // const testDATA = {
  //   largeAmount: "1321321",
  //   CardType: "1",
  //   Identification: ["0011"],
  //   accountCountry: "jack",
  //   city: ["110000", "110000"],
  //   currency: "HKD",
  //   detailAddress: "211221221",
  //   name: "12",
  //   swiftcode: "21321",
  //   transferAmount: "232132",
  //   type: "private",
  //   url: "13213",
  // };
  // 数据回显;
  useEffect(() => {
    // console.log("effect", flag);
    if (!flag) {
      form.setFieldsValue({
        ...echoData,
      });
    }
  }, [flag, echoData]);

  const titleDom = () => {
    if (flag) {
      return <span>{t('form.Newaccountinformation')}</span>;
    } else {
      return <span>{t('form.Modifyaccountinformation')}</span>;
    }
  };

  return (
    <Drawer
      // title={flag ? '新增客户账户信息' : '修改客户账户信息'}
      title={titleDom()}
      width={820}
      onClose={() => {
        onClose(false);
        form.resetFields();
      }}
      open={open}
      bodyStyle={{
        paddingBottom: 80,
      }}
      footer={
        <Space>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            {/* 重置 */}
            {t('buttons.Reset')}
          </Button>
          <Button
            onClick={() => {
              onClose(false);
              handleSubmit();
              form.resetFields();
            }}
            type="primary"
          >
            {/* 提交 */}
            {t('buttons.confirm')}
          </Button>
        </Space>
      }
    >
      <Form form={form}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="name"
              // label="账户号"
              label={t('form.AccountNo')}
              rules={[
                {
                  required: true,
                  // message: "请输入账户号",
                },
              ]}
            >
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="url"
              // label="账户名称"
              label={t('form.accountTitle')}
              rules={[
                {
                  required: true,
                  // message: "请输入账户名称",
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入账户名称"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="Identification"
              // label="地区银行识别码"
              label={t('form.Bankidentificationcode')}
              rules={[
                {
                  required: true,
                  // message: "请输入银行识别码",
                },
              ]}
            >
              <Cascader
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                showSearch={{
                  filter,
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="type"
              // label="账户类型"
              label={t('form.AccountType')}
              rules={[
                {
                  required: true,
                  // message: "请选择账户类型",
                },
              ]}
            >
              <Select allowClear>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="accountCountry"
              // label="账户归属国家"
              label={t('form.CustomerCountry')}
              rules={[
                {
                  required: true,
                  // message: "请输入归属国家",
                },
              ]}
            >
              <Select allowClear>
                <Option value="jack">Jack Ma</Option>
                <Option value="tom">Tom Liu</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="currency"
              // label="账户币种"
              label={t('form.AccountCurrency')}
              rules={[
                {
                  required: true,
                  // message: "请输入选择账户币种",
                },
              ]}
            >
              <Select allowClear>
                {publicData.moneyData.map((district) => (
                  <Option key={district.currency}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="city"
              label={t('form.Addressdepositbank')}
              // label="开户银行所在省市"
              rules={[
                {
                  required: true,
                  // message: "请输入开户银行所在省市",
                },
              ]}
            >
              <Cascader
                options={publicData.cityData}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="CardType"
              label={t('form.Cardtype')}
              // label="卡折类型"
              rules={[
                {
                  required: true,
                  // message: "请输入卡折类型",
                },
              ]}
            >
              <Select allowClear>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="largeAmount"
              // label="大额支付系统行号"
              label={t('form.LargeamountpaymenbankNo')}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="swiftcode"
              label="SWIFTCODE"
              rules={[
                {
                  required: true,
                  // message: "请输入SWIFTCODE",
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
                // placeholder="请输入SWIFTCODE"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              // label="中转支付行号"
              label={t('form.changetrainsShops')}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailAddress"
              // label="详细地址"
              label={t('form.SpecificAddress')}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                allowClear
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Drawer>
  );
};

export default AddCustomerAccount;
